<template>
  <a-modal
    :maskClosable="false"
    :title="(editRowId ? '修改' : '上传') + title"
    centered
    :width="500"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules">
      <a-form-model-item
        v-if="visible"
        :labelCol="{ span: 6 }"
        :wrapperCol="{ span: 18 }"
        label="所在分组"
        prop="groupId"
      >
        <GroupSelect
          v-model="form.groupId"
          :activeTabKey="activeTabKey"
          undistributed
          placeholder="请选择素材存放分组"
        />
      </a-form-model-item>
      <a-form-model-item
        v-if="activeTabKey === fileTypeEnums.IMAGE"
        :labelCol="{ span: 6 }"
        :wrapperCol="{ span: 18 }"
        :label="'上传' + title"
        prop="fileList"
      >
        <WarehouseUploadImg v-model="form.fileList" :limit="0" />
      </a-form-model-item>
      <template v-else>
        <!-- 不允许修改视频url -->
        <a-form-model-item
          v-if="!editRowId"
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 18 }"
          :label="'上传' + title"
          prop="videoUrl"
        >
          <WarehouseUploadVideo v-model="form.videoUrl" :limit="1" :fileSize="50" @change="VideoUrlChange" />
        </a-form-model-item>
        <a-form-model-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" :label="title + '名称'" prop="name">
          <a-input v-model="form.name" placeholder="请输入视频名称, 限制20字以内" :maxLength="20" clearable></a-input>
        </a-form-model-item>
        <a-form-model-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" :label="title + '封面'" prop="coverUrl">
          <WarehouseUploadImg
            v-model="form.coverUrl"
            :limit="1"
            cropper
            :width="100"
            :height="100"
            :cropperEnlarge="8"
          />
        </a-form-model-item>
      </template>
    </a-form-model>
  </a-modal>
</template>

<script>
import { fileTypeEnums } from '@/enums/content'
import { addWarehouse, editWarehouse } from '@/api/content/warehouse'
import { getFilename, getImagePathSmall } from '@/utils/common'
import GroupSelect from './groupSelect'

export default {
  name: 'warehouseUpModal',
  components: {
    // 避免循环引入组件报错 - 上传组件处引入素材库-然后点击上传
    WarehouseUploadImg: () => import('@/components/UpFile/uploadImg'),
    WarehouseUploadVideo: () => import('@/components/UpFile/uploadVideo'),
    GroupSelect
  },
  props: {
    activeTabKey: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      fileTypeEnums,
      title: '图片',
      visible: false,
      confirmLoading: false,
      form: {
        groupId: '',
        fileList: [], // 图片
        videoUrl: '', // 视频
        name: '', // 视频名称
        coverUrl: '' // 封面
      },
      editRowId: '', // 修改素材的ID
      rules: {
        groupId: [{ required: true, message: '请选择素材存放分组', trigger: 'change' }],
        fileList: [{ required: true, message: ' ', trigger: 'change' }], // 图片
        videoUrl: [{ required: true, message: ' ', trigger: 'change' }], // 视频
        name: [{ required: true, message: '请输入视频名称', trigger: 'blur' }], // 视频名称
        coverUrl: [{ required: true, message: ' ', trigger: 'change' }] // 封面
      }
    }
  },
  methods: {
    show(groupId, row) {
      const that = this
      Object.assign(that.$data, that.$options.data()) // 重置数据

      if (groupId) {
        that.form.groupId = groupId
      }

      // 编辑素材回显
      that.editRowId = row ? row.id : ''
      if (that.editRowId) {
        that.form.videoUrl = row.url
        that.form.coverUrl = row.coverUrl
        that.form.name = row.name
      }

      that.title = that.activeTabKey === fileTypeEnums.IMAGE ? '图片' : '视频'
      that.visible = true

      that.$nextTick(() => {
        that.$refs.ruleForm.clearValidate()
      })
    },
    VideoUrlChange(fileList) {
      if (!this.form.name) {
        this.form.name = getFilename(this.form.videoUrl)
      }
    },

    handleSubmit() {
      const that = this
      that.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (that.editRowId) {
            that._edit()
          } else {
            that._add()
          }
        }
      })
    },
    _add() {
      const that = this
      let params = {
        groupId: that.form.groupId,
        fileList: []
      }
      if (this.activeTabKey === fileTypeEnums.IMAGE) {
        params.fileList = that.form.fileList.map(v => {
          return {
            name: getFilename(v),
            type: that.activeTabKey,
            coverUrl: getImagePathSmall(v),
            url: v
          }
        })
      } else {
        params.fileList = [
          {
            name: that.form.name,
            type: that.activeTabKey,
            coverUrl: that.form.coverUrl,
            url: that.form.videoUrl
          }
        ]
      }
      that.confirmLoading = true
      addWarehouse(params)
        .then(() => {
          that.$emit('refresh')
          that.visible = false
          that.$message.success('新增成功')
          that.confirmLoading = false
        })
        .catch(() => {
          that.confirmLoading = false
        })
    },
    // 目前接口只支持修改视频
    _edit() {
      const that = this
      let params = {
        id: that.editRowId,
        name: that.form.name,
        coverUrl: that.form.coverUrl,
        groupId: that.form.groupId
      }
      that.confirmLoading = true
      editWarehouse(params)
        .then(() => {
          that.$emit('refresh')
          that.visible = false
          that.$message.success('修改成功')
          that.confirmLoading = false
        })
        .catch(() => {
          that.confirmLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
